<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				background-color: #1d1f20;
				color: #fff;
			}
			.container{
				height: 300px;
				width: 300px;
				margin: 50px;
			}
			.person{
				position: absolute;
				height: 75px;
				width: 0;
				color: #fff;
				left: 150px;
				top: 159px;
				transform-origin: 50% 50% 0px;
				-webkit-animation: sprint 2s infinite ease-in;
			}
			/* 画帽檐 */
			.person .head:before{
				content: "";
				position: absolute;
				top: 0px;
				left: -6px;
				height: 2.7px;
				width: 42px;
				border-radius: 20%;
				border: 4px solid white;
				background-color: #fff;
				z-index: 90;
			}
			/* 画人脸 */
			.person .head{
				position: absolute;
				top: -30px;
				left: -6px;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				border: 4px solid white;
				transform-origin: 50% 100% 0px;
				animation: bob 2s infinite alternate;
				z-index: 90;
				-webkit-animation: bob 2s infinite alternate;
			}
			/* 画帽子顶 */
			.person .head:after{
				content: "";
				position: absolute;
				top: -12px;
				left: 9px;
				height: 12px;
				width: 15px;
				border-radius: 30%;
				border: 4px solid white;
				background-color: #fff;
				z-index: 90;
			}
			/* 画中间腰 */
			.person .torso{
				position: absolute;
				height: 60px;
				width: 0px;
				border-left: 2px solid white;
				left: 0px;
				top: 15px;
				z-index: 90;
			}
			.person .part{
				position: absolute;
				width: 3px;
				height: 3px;
				left: 0;
				top: 75px;
				z-index: 90;
			}
			.person .part.arm{
				position: absolute;
				border-left: 3px solid white;
				border-bottom: 3px solid white;
				height: 45px;
				width: 39px;
				top: 15px;
				right: 300px;
				transform-origin: 0% 0% 0px;
				animation: pump 1s infinite ease-in-out;
			}
			.person .part.arm.one{
				transform: rotate3d(0, 0, 1, -90deg);
			}
			.person .part.arm.two{
				transform: rotate3d(0, 0, 1, -90deg);
				animation-delay: 0.5s;
			}
			.person .part.log{
				height: 57px;
				width: 60px;
				border-right: 3px solid white;
				border-top: 3px solid white;
				animation: run 1s infinite ease-in;
				transform-origin: 0% 0% 0px;
			}
			.person .part.log.one{
				transform: rotate3d(0, 0, 1, 90deg);
			}
			.person .part.log.two{
				transform: rotate3d(0, 0, 1, 80deg);
				animation-delay: 0.5s;
			}
			.person .part .foot{
				position: absolute;
				top: 90px;
				left: 0;
				width: 3px;
				height: 3px;
				background-color: #fff;
				z-index: 900;
				border: 3px solid red;
			}
			@keyframes run{
				0%{transform: rotate3d(0, 0, 1, -5deg);}
				50%{transform: rotate3d(0, 0, 1, 150deg);}
				100%{transform: rotate3d(0, 0, 1, -5deg);}
			}
			@keyframes bob{
				0%{transform: rotate3d(0, 0, 1, 5deg);}
				25%{transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);}
				50%{transform: rotate3d(0, 0, 1, 5deg);}
				75%{transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);}
				100%{transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);}
			}
			@keyframes pump{
				0%{transform: rotate3d(0, 0, 1, 80deg);}
				50%{transform: rotate3d(0, 0, 1, -70deg);}
				100%{transform: rotate3d(0, 0, 1, 80deg);}
			}
			@keyframes sprint{
				0%{
					transform-origin: 50% 50% 0px;
					transform: translate(1500px,0px);
					}
				100%{
					transform-origin: 50% 50% 0px;
					transform: translate(100px,0px);
					}
			}
		</style>
	</head>
	<body>
		  <div class="container"></div>
		  <div class="person">
		   <div class="head"></div>
		   <div class="part arm one"></div>
		   <div class="part arm two"></div>
		   <div class="torso"></div>
		   <div class="part log one"></div>
		   <div class="part foot one"></div>
		   <div class="part log two"></div>
		   <div class="part foot two"></div>
	</body>
</html>